<template>
    <div>
        <div class="amap-page-container map-zoom">
            <el-amap :vid="'position' + randomNum" :zoom="zoom" :center="center" class="amap-demo" :plugin="plugin">
                <el-amap-marker
                        v-for="(marker,index) in dirverMarkers"
                        :key="index"
                        :position="marker.position"
                        :events="marker.events"
                        :visible="marker.visible"
                        :draggable="marker.draggable">
                    <img src="./img/Group7@3x.png" v-if="marker.type === 'driver' " class="Driverimg">
                    <span v-if="marker.type === 'driver' " class="dirverName">{{marker.name}}</span>
                </el-amap-marker>
            </el-amap>
        </div>
    </div>
</template>

<style scoped lang="less">
    .amap-page-container {
        height: 82vh;
        padding-bottom: 0px;
        .Driverimg {
            width: 60px;
            height: 40px;
            position: absolute;
            left: -20px;
            top: 6px;
        }
        .dirverName {
            font-size: 15px;
            width: 66px;
            text-align: center;
            position: absolute;
            z-index: 99;
            left: -23px;
            top: 6px;
        }

    }

</style>


<script>
    import {AMapManager} from "vue-amap";
    import axios from "axios";

    export default {
        props: {},
        data() {
            return {
                randomNum: Math.floor(Math.random() * 1000000000000000 + 1),
                amapManager: new AMapManager(),
                zoom: 12,
                center: [116.397428, 39.90923],
                dirverMarkers: [],
                plugin: [{
                    pName: 'ToolBar',
                    events: {
                        init(instance) {
                        }
                    }
                }],
            };
        },
        created() {
            this.center = JSON.parse(localStorage.getItem('lnglat'));
        },
        methods: {
        }

    }

</script>
